<template>
    <div class="banner">
       <div @click="showSwiper">
            <div class="banner-img">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb1-q.mafengwo.net%2Fs15%2FM00%2F90%2FED%2FCoUBGV5cdwSAckTyAAPpgj97G_A76.jpeg%3FimageMogr2%252Fthumbnail%252F%21215x140r%252Fgravity%252FCenter%252Fcrop%252F%21215x140%252Fquality%252F100&refer=http%3A%2F%2Fb1-q.mafengwo.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619858342&t=39d12023d2b1355bf1a56c0c43d1030d" alt="">
            </div>
            <div class="banner-title">
                新疆棉花世界第一
            </div>        
       </div>
        <div class="img-swiper" v-show="imgSwiper" 
        @click="hideSwiper">
        <swiper :options="swiperOptions">
            <swiper-slide v-for='item in bannerList' :key='item.id'>
                <img :src="item.imgUrl">
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
        </div>
    </div>
</template>
<script>
export default {
    
    data(){
        return{
            swiperOptions:{
                 pagination: {
                    el: '.swiper-pagination',
                    type: 'fraction',
                    },
            },
            bannerList:[
                {
                    id:"01",
                    imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp1-q.mafengwo.net%2Fs11%2FM00%2F7E%2F49%2FwKgBEFtRf76ABHazABGrxlGB-3g23.jpeg%3FimageMogr2%252Fthumbnail%252F%21215x140r%252Fgravity%252FCenter%252Fcrop%252F%21215x140%252Fquality%252F100&refer=http%3A%2F%2Fp1-q.mafengwo.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619859004&t=0fd0ac3f981bfef9559816ec0d6edff5"
                },
                {
                    id:"02",
                    imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0328%252Fd86a786ej00qqor2u0008c0006o004gc.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619860108&t=09f45911a19e50015d3b13aa6bdd6e16"
                },
                {
                    id:"03",
                    imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb1-q.mafengwo.net%2Fs11%2FM00%2F1A%2F56%2FwKgBEFtHZpKAJXE1AA5YpwFjK0E13.jpeg%3FimageMogr2%252Fthumbnail%252F%21215x140r%252Fgravity%252FCenter%252Fcrop%252F%21215x140%252Fquality%252F100&refer=http%3A%2F%2Fb1-q.mafengwo.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619860142&t=8fb871691e3e7398f0c4b9e2b2ff58d3"
                },
                {
                    id:"04",
                    imgUrl:"https://ss3.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/baike/s%3D220/sign=d079de2cdab44aed5d4eb9e6831d876a/472309f790529822246fe4a5d7ca7bcb0a46d47c.jpg"
                },
                {
                    id:"05",
                    imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb1-q.mafengwo.net%2Fs11%2FM00%2F9B%2FA4%2FwKgBEFsyCeKAbfUJAA_4oBeX3ck01.jpeg%3FimageMogr2%252Fthumbnail%252F%21215x140r%252Fgravity%252FCenter%252Fcrop%252F%21215x140%252Fquality%252F100&refer=http%3A%2F%2Fb1-q.mafengwo.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619860182&t=dd2dca3b13454830fd4ee32768048d38"
                },
            ],
           imgSwiper:false
        }
    },
    methods:{
        showSwiper(){
            this.imgSwiper=true
        },
        hideSwiper(){
            this.imgSwiper=false            
        }
    }
}
</script>
<style scoped>
.banner{
    position: relative;
}
.banner-img{
    width: 100%;
    overflow: hidden;
    height: 0;
    padding-bottom: 55%;
}
.banner-img img{
    width: 100%;
}
.banner-title{
    position: absolute;
    bottom: .4rem;
    left: .3rem;
    font-size: 0.36rem;
    color: #fff
} 
.img-swiper{
    background: #000;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.img-swiper img{
    width: 100%;
}
</style>
